<!-- Naverbar的头像子组件 -->
<!-- v-bind="$attrs" -->

<!-- 原版：
   avatar && avatar != ''
          ? avatar
          : `${proxy.globalInfo.avatarUrl}${userId}?{timestamp}`
 -->

<template>
  <span
    class="avatar-user"
    :style="{ width: width + 'px', height: height + 'px' }"
  >
    <el-avatar
      :size="40"
      :src="
        user && user.avatarurl
          ? user.avatarurl
          : '../assets/file/avatar/default_avatar.png'
      "
      fit="cover"
      @error="errorHandler"
    >
      <img src="../assets/file/avatar/default_avatar.png" />
    </el-avatar>
  </span>
</template>

<script lang="ts" setup>
import { watch, useAttrs, onMounted, watchEffect, computed, inject } from "vue";
// 注入进来的是 ref 对象
const user = inject("userInfo");

const props = defineProps({
  width: {
    type: Number,
    default: 40,
  },
  height: {
    type: Number,
    default: 40,
  },

  avatarurl: {
    type: String,
    default: "",
  },
});

// const attrs = useAttrs();
// console.log("透传的属性Avatar:", attrs);

const errorHandler = () => {
  return true;
};
</script>

<style lang="scss" scoped>
.avatar-user {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    object-fit: cover;
  }
}
</style>
